<template>
	<view class="container">
		<view class="top">
			<view class="">
				<view class="tea">点茶></view>
				<view class="jl">距离您10km</view>
			</view>
			<image src="../../static/nclogo.webp" mode=""></image>
		</view>
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="h100">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/sptp/nchb1.jpeg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/sptp/nchb2.jpeg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/sptp/nchb3.webp" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="list">
			<!-- <view class="left-list">
				<view v-for="(item,i) in typeList" :class="i===index?'current':''" @click="selectTab(i,item.id)">
					<image :src="'http://47.96.80.123:8000/img/'+item.timageurl" mode=""></image>
					<view>{{item.typename}}</view>
				</view> -->

			<view class="left-list">
				<view v-for="item in 1" :class="i===index?'current':''" @click="selectTab(i,item.id)">
					<image src="../../static/product_icon.png" mode=""></image>
					<view>醇香奶茶</view>
				</view>
				<view>
					<image src="../../static/t4.png" mode=""></image>
					<view>四季鲜果茶</view>
				</view>
				<view>
					<image src="../../static/t2.png" mode=""></image>
					<view>鲜牛乳</view>
				</view>
				<view>
					<image src="../../static/kf.png" mode=""></image>
					<view>醇香咖啡</view>
				</view>

			</view>



			<view class="right-list">

				<!-- <view v-for="item in productList">
					<image class="photo" :src="'http://47.96.80.123:8000/img/'+item.pimageurl" mode=""></image>
					<view style="margin-left: 25rpx;margin-right: 25rpx; width: 325rpx;">
						<view class="title">{{item.pname}}</view>
						<view class="number">{{item.tintroduce}}(大杯)</view>
						<view style="display: flex;justify-content: space-between;">
							<view>
								￥
								<text class="price">
									15
								</text>起
							</view>
							<image class="cart" src="../../static/sptp/cart.png" mode="" @click="addCart(item)"></image>
						</view>
					</view>
				</view> -->

				<view>
					<image class="photo" src="/static/sptp/n1.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right: 25rpx; width: 325rpx;">
						<view class="title">红豆麻薯双拼</view>
						<view class="number">1杯(大杯)</view>
						<view style="display: flex;justify-content: space-between;">
							<view>
								￥
								<text class="price">
									15
								</text>起
							</view>
							<image class="cart" src="../../static/sptp/cart.png" mode="" @click="addCart(item)"></image>
						</view>
					</view>
				</view>
				<view>
					<image class="photo" src="/static/sptp/n2.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right: 25rpx; width: 325rpx;">
						<view class="title">招牌芋圆奶茶</view>
						<view class="number">1杯(大杯)</view>
						<view style="display: flex;justify-content: space-between;">
							<view>
								￥
								<text class="price">
									10
								</text>起
							</view>
							<image class="cart" src="../../static/sptp/cart.png" mode="" @click="addCart(item)"></image>
						</view>
					</view>
				</view>




			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [],
				productList: [],
				index: 0,
			}
		},
		onLoad() {
			this.getTypeList()
			this.queryProductByType(1)
		},
		methods: {
			getTypeList() {
				uni.request({
					url: "http://47.96.80.123:8000/type/getTypes",
					success: (res) => {
						this.typeList = res.data.data
					}
				})
			},
			//切换不同分类
			selectTab(currentIndex, id) {
				this.index = currentIndex
				this.queryProductByType(id)
			},
			queryProductByType(productId) {
				uni.request({
					url: "http://47.96.80.123:8000/product/queryProductByType?id=" + productId,
					success: (res) => {
						this.productList = res.data.data
					}
				})
			},
			addCart(product) {
				console.log("购物车");
				//http://47.96.80.123:8000/cart/addCart?number=1&pid=3&tprice=20&token=65f7856539dcbbadd648ad77e13fe791
				console.log(product);

				uni.getStorage({
					key: "teaToken",
					success: (data) => {
						console.log(data)
						uni.request({
							//模板字符串
							url: `http://47.96.80.123:8000/cart/addCart?number=1&pid=${product.id}&tprice=${product.tprice}&token=${data.data}`,

							//+号拼接
							//url:"http://47.96.80.123:8000/cart/addCart?number=1&pid="+product.id+"&tprice="+product.tprice+"&token="+data.data,
							success: (res) => {
								if (res.data.code === "0") {
									uni.showToast({
										title: "添加成功",
										duration: 2000,
										icon: "fail"
									})
								} else {
									uni.showToast({
										title: res.data.msg,
										duration: 2000,
										icon: "error"
									})
								}
							}
						})
					}
				})


			}

		}
	}
</script>

<style>
	.top {
		height: 10%;
		display: flex;
		justify-content: space-between;
		padding: 15rpx;
		box-sizing: border-box;
		align-items: center;
	}

	.top image {
		width: 200rpx;
		height: 150rpx;
	}

	.swiper {
		height: 20%;

	}

	.list {
		margin-top: 25rpx;
		height: 70%;
	}

	.tea {
		font-size: 42rpx;
		font-weight: bold;
		color: darkorange;
	}

	.jl {
		color: #ccc;
		font-size: 30rpx;
	}

	.h100 {
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		height: 100%;
	}

	.list {
		display: flex;
		justify-content: space-between;
	}

	.list .left-list {
		height: 100%;
		width: 150rpx;
	}

	.left-list image {
		width: 70rpx;
		height: 70rpx;
	}

	.left-list>view {
		height: 150rpx;
		background: #f5f5f5;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.left-list view {
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
	}

	.list .right-list {
		width: 575rpx;
		height: 100%;
		overflow: auto;
	}

	.current {
		background: #fff !important;
		color: coral;
	}

	.right-list>view {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.photo {
		width: 200rpx;
		height: 200rpx;
	}

	.cart {
		width: 50rpx;
		height: 50rpx;
	}

	.title {
		font-size: 35rpx;
		font-weight: bold;
	}

	.number {
		font-size: 25rpx;
		color: #ccc;
		line-height: 60rpx;
	}

	.price {
		font-size: 35rpx;
		color: coral;
		display: inline-block;
		font-weight: bold;
	}
</style>